<template>
  <div style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center">
    <div id="rose" style="width: 450px;height: 450px;transform: translateY(-20px)" />
  </div>


</template>

<script>
  let echarts = require('echarts')
  export default {
    name: "type",
    props:['prop'],
    data(){
      return {
      }
    },

    methods:{
      init(name,data){
        let options = {
          tooltip: {
            trigger: 'item',
            formatter: '{b} : ({d}%)'
          },

          legend: {
            orient: 'vertical',
            top:50,
            left: 20,
            data: name,
            textStyle:{//图例文字的样式
              color:'#ccc',
              fontSize:12
            }
          },
          series: [{
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            center:[280,170],
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data:this.prop.data
          }]
        };

        let linearBarDom = echarts.getInstanceByDom(document.getElementById('rose'))
        if(linearBarDom == null){
          linearBarDom = echarts.init(document.getElementById('rose'))
        }
        linearBarDom.resize()
        linearBarDom.setOption(options,false)

      }
    },
    watch: {
      prop: {
        handler (val) {
          this.init()
        },
        deep: true
      }
    },
    mounted () {
      this.init()
    },

  }
</script>

<style scoped lang="scss">

</style>
